<script setup lang="ts">
import BaseImage from '~/components/BaseImage.vue';
import avatar from '/images/webp/statistics/avatar.webp';

const { t } = useI18n()

const props = defineProps<{
  username: string
  createTime?: number | string
}>()

</script>

<template>
  <div class="user-info flex-col justify-between">
    <div class="user-detail flex items-center justify-between">
      <div class="flex items-center">
        <BaseImage class="avatar" :url="avatar" />
        <div class="nickname">{{ props.username }}</div>
      </div>
      <span class="user-meta-item" v-if="props.createTime">
        {{ t('joinDate') }}   
        {{ timeToFormatDay(Number(props.createTime)) }}
      </span>
    </div>
  </div>
</template>

<style scoped>
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 7px;
}
.user-detail {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.user-detail .nickname {
  font-size: 12.209px;
  font-style: normal;
  font-weight: 590;
}
.user-meta {
  width: 100%;
  font-size: 12px;
  color: #B3BEC1;
  display: flex;
  gap: 16px;
}
</style>
